<template>
  <div>
    <h-box header="用户基本信息">
      <el-row type="flex" :gutter="20">
        <el-col :span="8" class="hui-flex__none">
          <el-card :body-style="{ padding: '0px' }">
            <h-image mode="background-image" :src="userInfo.headimgurl" width="100%" height="240px"></h-image>
            <div
              style="line-height: 25px;"
              class="hui-p-1"
              :class="userInfo.sex === 1 ? 'hui-userinfo-sex1' : userInfo.sex === 2 ? 'hui-userinfo-sex2' : 'hui-userinfo-sex0'"
            >
              <div class="hui-font-weight-primary hui-font-size-medium hui-ellip-1">昵称: {{ userInfo.nickName | placeholder('未知') }}</div>
              <div class="hui-font-size-small hui-userinfo-area hui-ellip-1">地区: {{ userInfo.country | placeholder('未知') }} - {{ userInfo.province | placeholder('未知') }} - {{ userInfo.city | placeholder('未知') }}</div>
              <div class="hui-font-size-small hui-userinfo-area hui-ellip-1">
                关注公众号:
                <template v-if="userInfo.subscribe === 1">关注中</template>
                <template v-else>未关注</template>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-form :model="userInfo" label-width="10em" label-position="left" class="hui-form-data">
            <!-- <el-form-item label="公众号openid:">{{ userInfo.openidMp }}</el-form-item>
            <el-form-item label="小程序openid:">{{ userInfo.openidWa }}</el-form-item>
            <el-form-item label="商户unionid:">{{ userInfo.unionidAc }}</el-form-item> -->
            <el-form-item label="最后关注时间:"><span class="hui-font-number">{{ userInfo.subscribeTime !== undefined ? $moment.unix(userInfo.subscribeTime).format("YYYY-MM-DD HH:mm:ss") : '暂无' }}</span></el-form-item>
            <el-form-item label="最后关注渠道:">
              <template v-if="userInfo.subscribeScene === 'ADD_SCENE_SEARCH'">公众号搜索</template>
              <template v-else-if="userInfo.subscribeScene === 'ADD_SCENE_ACCOUNT_MIGRATION'">公众号迁移</template>
              <template v-else-if="userInfo.subscribeScene === 'ADD_SCENE_PROFILE_CARD'">名片分享</template>
              <template v-else-if="userInfo.subscribeScene === 'ADD_SCENE_QR_CODE'">扫描二维码</template>
              <template v-else-if="userInfo.subscribeScene === 'ADD_SCENEPROFILE_LINK'">图文页内名称点击</template>
              <template v-else-if="userInfo.subscribeScene === 'ADD_SCENE_PROFILE_ITEM'">图文页右上角菜单</template>
              <template v-else-if="userInfo.subscribeScene === 'ADD_SCENE_PAID'">支付后关注</template>
              <template v-else-if="userInfo.subscribeScene === 'ADD_SCENE_OTHERS'">其他</template>
              <template v-else>未知</template>
            </el-form-item>
            <el-form-item label="首次关注时间:"><span class="hui-font-number">{{ userInfo.subscribeTimeFrist !== undefined ? $moment.unix(userInfo.subscribeTimeFrist).format("YYYY-MM-DD HH:mm:ss") : '暂无' }}</span></el-form-item>
            <el-form-item label="首次关注渠道:">
              <template v-if="userInfo.subscribeSceneFrist === 'ADD_SCENE_SEARCH'">公众号搜索</template>
              <template v-else-if="userInfo.subscribeSceneFrist === 'ADD_SCENE_ACCOUNT_MIGRATION'">公众号迁移</template>
              <template v-else-if="userInfo.subscribeSceneFrist === 'ADD_SCENE_PROFILE_CARD'">名片分享</template>
              <template v-else-if="userInfo.subscribeSceneFrist === 'ADD_SCENE_QR_CODE'">扫描二维码</template>
              <template v-else-if="userInfo.subscribeSceneFrist === 'ADD_SCENEPROFILE_LINK'">图文页内名称点击</template>
              <template v-else-if="userInfo.subscribeSceneFrist === 'ADD_SCENE_PROFILE_ITEM'">图文页右上角菜单</template>
              <template v-else-if="userInfo.subscribeSceneFrist === 'ADD_SCENE_PAID'">支付后关注</template>
              <template v-else-if="userInfo.subscribeSceneFrist === 'ADD_SCENE_OTHERS'">其他</template>
              <template v-else>未知</template>
            </el-form-item>
            <el-form-item label="手机:"><span class="hui-font-number">{{ userInfo.mobile | placeholder('未知') }}</span></el-form-item>
            <el-form-item label="完善手机时间:"><span class="hui-font-number">{{ userInfo.mobileTime !== undefined ? $moment.unix(userInfo.mobileTime).format("YYYY-MM-DD HH:mm:ss") : '暂无' }}</span></el-form-item>
            <el-form-item label="生日:"><span class="hui-font-number">{{ userInfo.brithday !== undefined ? $moment.unix(userInfo.brithday).format("YYYY-MM-DD") : '暂无' }}</span></el-form-item>
            <el-form-item label="完善生日时间:"><span class="hui-font-number">{{ userInfo.brithdayTime !== undefined ? $moment.unix(userInfo.brithdayTime).format("YYYY-MM-DD HH:mm:ss") : '暂无' }}</span></el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-form :model="userInfo" label-width="10em" label-position="left" class="hui-form-data">
            <el-form-item label="累计消费次数:"><span class="hui-font-number">{{ userInfo.tradeCount }}</span> 次</el-form-item>
            <el-form-item label="累计消费金额:"><span class="hui-font-number">{{ userInfo.tradeAmountSum  / 100 | currency('￥', 2) }}</span></el-form-item>
            <el-form-item label="首次消费时间:"><span class="hui-font-number">{{ userInfo.tradeTimeFrist !== undefined ? $moment.unix(userInfo.tradeTimeFrist).format("YYYY-MM-DD HH:mm:ss") : '暂无' }}</span></el-form-item>
            <el-form-item label="末次消费时间:"><span class="hui-font-number">{{ userInfo.tradeTimeLast !== undefined ? $moment.unix(userInfo.tradeTimeFrist).format("YYYY-MM-DD HH:mm:ss") : '暂无' }}</span></el-form-item>
            <el-form-item label="累计储值次数:"><span class="hui-font-number">{{ userInfo.balanceAddCount }}</span> 次</el-form-item>
            <el-form-item label="累计储值金额:"><span class="hui-font-number">{{ userInfo.balanceAddAmountSum  / 100 | currency('￥', 2) }}</span></el-form-item>
            <el-form-item label="累计储值使用次数:"><span class="hui-font-number">{{ userInfo.balanceMinusCount }}</span> 次</el-form-item>
            <el-form-item label="累计储值使用金额:"><span class="hui-font-number">{{ userInfo.balanceMinusAmountSum  / 100 | currency('￥', 2) }}</span></el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </h-box>

    <h-box header="用户积分信息">
      <el-card>
        <el-row type="flex" align="middle" class="hui-text-center">
          <el-col>
            <div class="hui-font-size-base">积分余额</div>
            <div class="hui-userinfo-value">900</div>
          </el-col>
          <el-col class="hui-userinfo-value">=</el-col>
          <el-col>
            <div class="hui-font-size-base">可用积分</div>
            <div class="hui-userinfo-value">900</div>
          </el-col>
          <el-col class="hui-userinfo-value">+</el-col>
          <el-col>
            <div class="hui-font-size-base">保护期内</div>
            <div class="hui-userinfo-value">0</div>
          </el-col>
          <el-col class="hui-userinfo-value">=</el-col>
          <el-col>
            <div class="hui-font-size-base">累计获得</div>
            <div class="hui-userinfo-value">1200</div>
          </el-col>
          <el-col class="hui-userinfo-value">-</el-col>
          <el-col>
            <div class="hui-font-size-base">累计使用</div>
            <div class="hui-userinfo-value">300</div>
          </el-col>
          <el-col class="hui-userinfo-value">-</el-col>
          <el-col>
            <div class="hui-font-size-base">累计过期</div>
            <div class="hui-userinfo-value">0</div>
          </el-col>
        </el-row>
      </el-card>

      <div class="hui-mt-2">
        <el-button type="primary" icon="el-icon-service">发积分 / 减积分</el-button>
      </div>
      <el-table :data="userBonus.list" stripe border class="hui-mt-1">
        <el-table-column label="流水号" prop="id" width="160" class-name="hui-font-number"></el-table-column>
        <el-table-column label="变动前积分" prop="bonusBefore" width="120" class-name="hui-font-number"></el-table-column>
        <el-table-column label="变动值" width="120" class-name="hui-font-number hui-font-weight-bold">
          <template slot-scope="scope">
            <span :class="scope.row.addBonus > 0 ? 'hui-color-danger' : 'hui-color-success'">{{ scope.row.addBonus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动后积分" prop="bonus" width="120" class-name="hui-font-number"></el-table-column>
        <el-table-column label="变动原因描述" prop="recordBonus"></el-table-column>
        <el-table-column label="变动时间" prop="createTimestamp" :formatter="$u2dtTableFormatter" width="180" class-name="hui-font-number"></el-table-column>
      </el-table>

      <!--分页，start-->
      <el-pagination @current-change="handleCurrentChange('userBonus')" :current-page.sync="userBonus.pages" :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next" :total="userBonus.total" background class="hui-mt-2"></el-pagination>
      <!--分页，end-->
    </h-box>

    <h-box header="用户会员卡信息">
      <div>
        <el-button type="primary" icon="el-icon-service">发会员卡</el-button>
      </div>
      <el-table :data="userCards.list" stripe border class="hui-mt-1">
        <el-table-column label="会员卡">
          <template slot-scope="scope">
            <div>名称: {{ scope.row.title }}</div>
            <div>卡号: {{ scope.row.code }}</div>
            <div v-if="scope.row.level">等级: {{ scope.row.level | placeholder('暂无') }}</div>
            <div>
              类型:
              <el-tag v-if="scope.row.cardType === 1" type="success" size="small">全部门店可用的会员卡</el-tag>
              <el-tag v-else-if="scope.row.cardType === 2" type="primary" size="small">部分门店可用的会员卡</el-tag>
              <el-tag v-else type="warning" size="small">cardType: {{ scope.row.cardType }}</el-tag>
            </div>
            <div>
              状态:
              <el-tag v-if="scope.row.userCardStatus === 'NORMAL'" type="primary" size="small">正常</el-tag>
              <el-tag v-else-if="scope.row.userCardStatus === 'EXPIRE'" type="info" size="small">已过期</el-tag>
              <el-tag v-else-if="scope.row.userCardStatus === 'UNAVAILABLE'" type="warning" size="small">已失效</el-tag>
              <el-tag v-else type="danger" size="small">{{ scope.row.userCardStatus }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="有效期" width="220">
          <template slot-scope="scope">
            <div>生效: {{ $u2dt(scope.row.beginTime) | placeholder('暂无') }}</div>
            <div>过期: {{ $u2dt(scope.row.endTime) | placeholder('暂无') }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作记录（时间 / 事件 / 操作人）" width="400">
          <template slot-scope="scope">
            <ul class="hui-pl-1 hui-m-0">
              <li v-for="(item, index) in scope.row.changeLog" :key="index">
                <template>{{ $u2dt(item.timestamp) }} / </template>

                <template v-if="item.event === 'get'">领取 / </template>
                <template v-else-if="item.event === 'upgrade'">升级 / </template>
                <template v-else-if="item.event === 'unavailable'">失效 / </template>
                <template v-else-if="item.event === 'expire'">过期 / </template>
                <template v-else>{{ item.event }} / </template>

                <template>{{ item.operator }}</template>
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="110">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.userCardStatus !== 'NORMAL'" type="danger" size="mini" plain>设置失效</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页，start-->
      <el-pagination @current-change="handleCurrentChange('userCards')" :current-page.sync="userCards.pages" :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next" :total="userCards.total" background class="hui-mt-2"></el-pagination>
      <!--分页，end-->
    </h-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userInfo: {
        uid: undefined,
        openidMp: '',
        openidWa: '',
        unionidAc: '',
        openidMw: '',
        unionidMw: '',
        subscribe: undefined,
        nickName: '',
        sex: undefined,
        country: '',
        province: '',
        city: '',
        headimgurl: '',
        subscribeTime: undefined,
        subscribeScene: undefined,
        subscribeTimeFrist: undefined,
        subscribeSceneFrist: undefined,
        mobile: '',
        mobileTime: undefined,
        brithday: undefined,
        brithdayTime: undefined,
        tradeCount: undefined,
        tradeAmountSum: undefined,
        tradeTimeFrist: undefined,
        tradeTimeLast: undefined,
        balanceAddCount: undefined,
        balanceAddAmountSum: undefined,
        balanceMinusCount: undefined,
        balanceMinusAmountSum: undefined
      },
      userBonus: {
        bonus: undefined,
        bonusCanUse: undefined,
        bonusLocked: undefined,
        bonusAddSum: undefined,
        bonusMinusSum: undefined,
        bonusExpireSum: undefined,
        total: 0,
        pages: 0,
        list: [
          {
            id: undefined,
            bonusBefore: undefined,
            addBonus: undefined,
            recordBonus: '',
            bonus: undefined,
            createTimestamp: undefined
          }
        ]
      },
      userCards: {
        total: 0,
        pages: 0,
        list: [
          {
            cardType: undefined,
            cardId: undefined,
            title: '',
            backgroundPicUrl: this.$randomEnum(this.$store.state.image),
            level: 1,
            code: '',
            beginTime: 0,
            endTime: 0,
            userCardStatus: '',
            changeLog: []
          }
        ]
      }
    }
  },
  created () {
    this.initMockUserInfo()
    this.initMockUserBonus()
    this.initMockUserCards()
  },
  methods: {
    // 模拟数据，用户基本信息
    initMockUserInfo () {
      this.userInfo = {
        uid: 10000,
        openidMp: this.$randomString(),
        openidWa: this.$randomString(),
        unionidAc: this.$randomString(),
        openidMw: this.$randomString(),
        unionidMw: this.$randomString(),
        subscribe: this.$randomNumber(0, 1),
        nickName: this.$randomEnum(this.$store.state.nickName),
        sex: this.$randomNumber(0, 2),
        country: '中国',
        province: '福建',
        city: '厦门',
        headimgurl: this.$randomEnum(this.$store.state.image),
        subscribeTime: 1524557457,
        subscribeScene: this.$randomEnum(this.$store.state.subscribeScene),
        subscribeTimeFrist: 1524557457,
        subscribeSceneFrist: this.$randomEnum(this.$store.state.subscribeScene),
        mobile: '13262268525',
        mobileTime: this.$randomNumber(1514736000, 1525104000),
        brithday: this.$randomNumber(-315648000, 1230739199),
        brithdayTime: this.$randomNumber(1514736000, 1525104000),
        tradeCount: this.$randomNumber(0, 20),
        tradeAmountSum: this.$randomNumber(0, 2000000),
        tradeTimeFrist: this.$randomNumber(1483200000, 1514735999),
        tradeTimeLast: this.$randomNumber(1514736000, 1525104000),
        balanceAddCount: this.$randomNumber(0, 10),
        balanceAddAmountSum: this.$randomNumber(0, 2000000),
        balanceMinusCount: this.$randomNumber(0, 40),
        balanceMinusAmountSum: this.$randomNumber(0, 2000000)
      }
    },
    // 模拟数据，积分数据
    initMockUserBonus () {
      let userBonus = {}
      let pages = this.userBonus.pages
      let i = 10
      let tmp = []
      while (i > 0) {
        tmp.push({
          id: 1000 + i,
          bonusBefore: this.$randomNumber(100, 1000),
          addBonus: this.$randomNumber(-500, 500),
          recordBonus: '积分消耗记录文字描述' + i,
          bonus: this.$randomNumber(0, 1000),
          createTimestamp: 1524729799 - (10 - i) * 10000
        })
        i--
      }
      userBonus = {
        bonus: 900,
        bonusCanUse: 900,
        bonusLocked: 0,
        bonusAddSum: 1200,
        bonusMinusSum: 300,
        bonusExpireSum: 0,
        total: 100,
        pages: pages + 1,
        list: tmp
      }
      this.userBonus = userBonus
    },
    // 分页事件
    handleCurrentChange (source) {
      switch (source) {
        case 'userBonus':
          this.$loading()
          setTimeout(() => {
            this.$loading().close()
          }, 500)
          break
        case 'userCards':
          this.$loading()
          setTimeout(() => {
            this.$loading().close()
          }, 500)
          break
      }
    },
    initMockUserCards () {
      let userCards = this.userCards
      let pages = this.userCards.pages
      let i = 5
      let tmp = []
      while (i > 0) {
        tmp.push({
          cardType: 2,
          cardId: this.$randomString(),
          title: '卡券标题' + i,
          backgroundPicUrl: this.$randomEnum(this.$store.state.image),
          level: undefined,
          code: this.$randomNumber(100000000000, 999999999999),
          beginTime: this.$startTimestamp(i),
          endTime: this.$endTimestamp(i),
          userCardStatus: this.$randomEnum(['NORMAL', 'EXPIRE', 'UNAVAILABLE']),
          changeLog: [
            {
              event: 'get',
              timestamp: this.$randomTimestamp(),
              operator: 'system'
            },
            {
              event: 'upgrade',
              timestamp: this.$randomTimestamp(),
              operator: 'system'
            },
            {
              event: 'expire',
              timestamp: this.$randomTimestamp(),
              operator: 'system'
            },
            {
              event: 'unavailable',
              timestamp: this.$randomTimestamp(),
              operator: '黄倬, 18621984214'
            }
          ]
        })
        i--
      }
      userCards = {
        total: 5,
        pages: pages + 1,
        list: tmp
      }
      this.userCards = userCards
    }
  }
}
</script>

<style lang="less">
@import "../../../../../common/h-theme/_variable.less";

@sex0: @--color-info;
@sex1: @--color-primary-light-2;
@sex2: #FA92B7;
.hui-userinfo-sex1 {
  background-color: @sex1;
  color: @--color-white;
}

.hui-userinfo-sex2 {
  background-color: @sex2;
  color: @--color-white;
}

.hui-userinfo-sex0 {
  background-color: @sex0;
  color: @--color-white;
}

.hui-userinfo-area {
  opacity: .7;
}

.hui-userinfo-value {
    font-family: 'Tahoma';
    font-size: 28px;
    font-weight: 500;
    color: #878d99;
}
</style>
